window.addEventListener('load', function() {
	// alert(1);
	// 1.获取元素
	var focus = document.querySelector('.focus');
	var ul = focus.children[0];
	// 获得focus的宽度
	var w = focus.offsetWidth;
	var ol = focus.children[1];
	// 2.利用定时器自动轮播图图片
	var index = 0;
	var timer = setInterval(function() {
		index++;
		var translateX = -index * w;
		ul.style.transition = 'all .3s';
		ul.style.transform = 'translateX(' + translateX + 'px)';
	}, 2000);
	//等着我们过度完成之后，再去判断监听过渡完成的事件 
	ul.addEventListener('transitionend', function() {
		if (index >= 3) {
			index = 0;
			ul.style.transition = 'none';
			var translateX = -index * w;
			ul.style.transform = 'translateX(' + translateX + 'px)';
		} else if (index < 0) {
			index = 2;
			ul.style.transition = 'none';
			var translateX = -index * w;
			ul.style.transform = 'translateX(' + translateX + 'px)';
		}
		// 小圆点跟随变化
		// 把ol里面li带有current类名的选出来去掉类名 remove
		ol.querySelector('li.current').classList.remove('current');
		// 让当前索引号的小li加上current add
		ol.children[index].classList.add('current');
	});
	// 4.手指滑动轮播图
	var startX = 0;
	var moveX = 0;
	var flag = false;
	ul.addEventListener('touchstart', function(e) {
		startX = e.targetTouches[0].pageX;
		clearInterval(timer);
	});
	ul.addEventListener('touchmove', function(e) {
		moveX = e.targetTouches[0].pageX - startX;
		var translatex = -index * w + moveX;
		ul.style.transition = 'none'
		ul.style.transform = 'translateX(' + translatex + 'px)';
		flag = true;
		e.preventDefault();
	});
	ul.addEventListener('touchend', function(e) {
		if (flag) {
			if (Math.abs(moveX) > 50) {
				if (moveX > 0) {
					index--;
				} else {
					index++;
				}
				var translateX = -index * w;
				ul.style.transition = 'all .3s';
				ul.style.transform = 'translateX(' + translateX + 'px)';
			} else {
				var translateX = -index * w;
				ul.style.transition = 'all .1s';
				ul.style.transform = 'translateX(' + translateX + 'px)';
			}
		}
		clearInterval(timer);
		timer = setInterval(function() {
			index++;
			var translateX = -index * w;
			ul.style.transition = 'all .3s';
			ul.style.transform = 'translateX(' + translateX + 'px)';
		}, 2000);
	});
	// 返回顶部模块制作
	var goback = document.querySelector('.goback');
	var nav = document.querySelector('nav');
	window.addEventListener('scroll', function() {
		if (window.pageYOffset >= nav.offsetTop) {
			goback.style.display = 'block';
		} else {
			goback.style.display = 'none';
		}
	});
	goback.addEventListener('click',function(){
		window.scroll(0,0);
	})

})
